<template>
    <div>
      <label class="notes">
        <span class="name">{{fieldName}}</span>
        <template v-if="type === 'date'">
          <input :type="type"
            :value="x(value)"
            @input="onValueChange($event.target.value)"
            :placeholder="placeHolder">
        </template>
        <template v-else>
          <input :type="'text'"
            :value="value"
            @input="onValueChange($event.target.value)"
            :placeholder="placeHolder">
        </template>
      </label>
    </div>
  </template>
  
  <script lang="ts">
    import Vue from 'vue';
    import { Component , Prop} from 'vue-property-decorator';
import dayjs from 'dayjs';
    @Component
    export default class notes extends Vue {
      @Prop({default:''}) readonly value!: string
      @Prop({required:true}) fieldName!: string
      @Prop() placeHolder?:string
      @Prop() type?: string
      onValueChange(value:string){
        this.$emit('update:value',value);
      }
      x(dateIso:string) {
        return dayjs(dateIso).format('YYYY-MM-DD')
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .notes {
      font-size: 14px;
      padding: 3px 0 3px 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #c4c4c4;
      .name {
        padding-right: 16px;
      }
      input {
        height: 40px;
        flex-grow: 1;
        background: transparent;
        border: none;
        padding-right: 16px;
      }
    }
  </style>